<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>锁定列</title>
<!--框架必需start-->
<script type="text/javascript" src="../../libs/js/jquery.js"></script>
<script type="text/javascript" src="../../libs/js/language/cn.js"></script>
<script type="text/javascript" src="../../libs/js/framework.js"></script>
<link href="../../libs/css/import_basic.css" rel="stylesheet" type="text/css"/>
<link rel="stylesheet" type="text/css" id="skin" prePath="../../" scrollerY="false"/>
<link rel="stylesheet" type="text/css" id="customSkin"/>
<!--框架必需end-->

<!--数据表格start-->
<script src="../../libs/js/table/quiGrid.js" type="text/javascript"></script>
<!--数据表格end-->

<!-- 日期选择框start -->
<script type="text/javascript" src="../../libs/js/form/datePicker/WdatePicker.js"></script>
<!-- 日期选择框end -->

<!--布局控件start-->
<script type="text/javascript" src="../../libs/js/nav/layout.js"></script>
<!--布局控件end-->
<script src="../../libs/thirdparty/highcharts/js/highcharts.js"></script>
<style>
.formBoxContent{
  padding: 5px 0 0 5px;
}
  .tdContentStyle1{
    background-repeat:no-repeat;
    padding:5px 0 0 10px;
    line-height:150%;

}
  .tdContentStyle2{
    background-repeat:no-repeat;
    padding:5px 0 0 10px;
    line-height:150%;
}
</style>
</head>
<body>
<div class="page_content">
  <div id="layout1">
      <div position="top" id="bottomCon" style="" panelTitle="条件检索">
          <div class="formBoxContent">
      <table>
        <tr>
          <td width="60" class="ali03">类型：</td>
          <td><select id="dd">
            <option value="0">请选择</option>
            <option value="1">类型1</option>
            <option value="2">类型2</option>
            <option value="3">类型3</option>
          </select></td>
          <td width="60" class="ali03">时间：</td>
          <td><input type="text" class="date"/></td>
          <td width="60" class="ali03">关键词：</td>
          <td><input type="text" /></td>
          <td><button type="button" class="primary"><span class="icon_find">查询</span></button></td>
    <td>
      <div class="buttonGroup" style="width: 160px;">   
          <span class="leftButton icon_chart_bar active">图表</span>
          <span class="rightButton icon_list">列表</span>
        </div>
    </td>
        </tr>
      </table>
    </div>            
        </div>
        <div   position="left" panelTitle="数据列表">
          <div id="leftCon">

       <div id="maingrid2"></div>  
      </div>
        </div>
        <div  position="center" panelTitle="对比图表">
 <div  id="chart">        
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
<div id="maingrid" style="display:none;"></div>
        </div>       
    </div> 

</div>  
  <script type="text/javascript">
        var testData={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"部门1","sex":"女","id":125,"degree":"硕士结业","age":20,"name":"员工1","deptId":12,"ability":1},
      {"deptName":"部门1","sex":"男","id":124,"degree":"本科毕业","age":20,"name":"员工2","deptId":11,"ability":2},
      {"deptName":"部门1","sex":"男","id":123,"degree":"本科毕业","age":20,"name":"员工3","deptId":9,"ability":2},
      {"deptName":"部门1","sex":"女","id":121,"degree":"硕士肄业","age":20,"name":"员工4","deptId":8,"ability":3},
      {"deptName":"部门1","sex":"男","id":120,"degree":"博士肄业","age":20,"name":"员工5","deptId":7,"ability":4},
      {"deptName":"部门2","sex":"女","id":119,"degree":"博士肄业","age":20,"name":"员工6","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","id":118,"degree":"博士肄业","age":20,"name":"员工7","deptId":6,"ability":6},
      {"deptName":"部门2","sex":"女","id":117,"degree":"博士肄业","age":20,"name":"员工8","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","id":116,"degree":"博士肄业","age":20,"name":"员工9","deptId":6,"ability":3},
      {"deptName":"部门2","sex":"女","id":115,"degree":"博士肄业","age":20,"name":"员工10","deptId":6,"ability":1},
      {"deptName":"部门2","sex":"女","id":114,"degree":"博士肄业","age":20,"name":"员工11","deptId":6,"ability":5},
      {"deptName":"部门2","sex":"女","id":113,"degree":"博士肄业","age":20,"name":"员工12","deptId":6,"ability":5}
      ]}
       
     
      var testData2={"form.paginate.pageNo":1,"form.paginate.totalRows":13,"rows":[
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"},
      {"deptName":"10:00-12:00<br>监控时间","sex":"10:00-12:00<br>运行时间","degree":"0<br>疲劳警告","age":20,"name":"G123<br>南京-北京"}
      
      ]}
       //数据表格使用
        var g;
         var g2;
    function initComplete(){
      var iconList=$(".rightButton");
      var iconChart=$(".leftButton");
      iconList.click(function(){
        iconList.removeClass("active");
        iconChart.removeClass("active");
        iconList.addClass("active");

        $("#maingrid")[0].style.display="";
        $("#chart")[0].style.display="none";

        g.resetWidth();
      })
      iconChart.click(function(){
        iconList.removeClass("active");
        iconChart.removeClass("active");
        iconChart.addClass("active");
        $("#maingrid")[0].style.display="none";
        $("#chart")[0].style.display="";
      })

      var currentwidth = document.documentElement.clientWidth;
      var layout=$("#layout1").layout({ leftWidth: currentwidth/2,topHeight:80,allowLeftResize:false,allowTopResize:false}); 

       $('#container').highcharts({
            chart: {
                type: 'bar'
            },
            title: {
                text: '载客数据'
            },
            xAxis: {
                categories: ['高铁', '动车', '软卧', '硬卧', '硬座']
            },
            yAxis: {
                min: 0,
                title: {
                    text: '运营时间'
                }
            },
            legend: {
                backgroundColor: '#FFFFFF',
                reversed: true
            },
            plotOptions: {
                series: {
                    stacking: 'normal'
                }
            },
                series: [{
                name: '工作日',
                data: [5, 3, 4, 7, 2]
            }, {
                name: '周末',
                data: [2, 2, 3, 2, 1]
            }, {
                name: '小长假',
                data: [3, 4, 4, 2, 5]
            }]
        });
      
      g = $("#maingrid").quiGrid({
                 columns: [ 
          { display: '姓名', name: 'name', align: 'center',  width: "30%"},

                  { display: '性别', name: 'sex', align: 'center' , width: "20%"},
                  { display: '部门', name: 'deptName',  align: 'center' , width: "30%"},
                  { display: '学历', name: 'degree',  align: 'center', width: "20%" }
                ], data:testData, pageSize: 20, rownumbers:false, checkbox:false,percentWidthMode:true,
                height: '100%', width:"100%",onReload:function(){return false}
            });

      g2 = $("#maingrid2").quiGrid({
                columns: [ 
                  
            { display: '姓名', name: 'name', align: 'center',  width: "30%", render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle1">' + rowdata.name+ '</div>';

                     return strhtml;

}  },
                  { display: '性别', name: 'sex', align: 'center' , width: "20%", render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle2">' + rowdata.sex+ '</div>';

                     return strhtml;

}  },
                  { display: '部门', name: 'deptName',  align: 'center' , width: "30%", render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle2">' + rowdata.deptName+ '</div>';

                     return strhtml;

}  },
                  { display: '学历', name: 'degree',  align: 'center', width: "20%" , render: function (rowdata, rowindex, value, column){

                        var strhtml='<div class="tdContentStyle1">' + rowdata.degree+ '</div>';

                     return strhtml;

}  }
                ], data:testData2, pageSize: 10, rownumbers:false, checkbox:false,percentWidthMode:true,
                height: '100%', width:"100%",rowHeight:65,onReload:function(){return false}
            });
      
      

    }
  function customHeightSet(contentHeight){
   // $("#leftCon").height(contentHeight-80);
  }
    </script>
</body>
</html>